<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- STYLESHEETS -->
  <!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
  <link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
  <link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
  <link rel="stylesheet" type="text/css" href="../../css/responsive.css">

  <link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">

  <!-- SELECT2 -->
  <link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
  <!-- UNIFORM -->
  <link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
  <!-- datatable -->
  <link rel="stylesheet" href="../../js/datatables/datatable.css">
  <style>
    .dataTables_scrollHeadInner {
        width: auto !important;
    }
    .dataTables_scrollHeadInner table {
        width:  100% !important;
    }
    .dataTables_scrollBody table td,
    .dataTables_scrollHeadInner table th {
      text-align: center;
    }
    .dataTables_scrollBody table tr td:last-child {
      text-align: left;
    }
    .dataTables_scrollBody table td.productName {
      text-align: left;
    }
  </style>
</head>

<body>
  <header class="navbar clearfix" id="header">
  </header>

  <!-- PAGE -->
  <section id="page">
    <!-- SIDEBAR -->
    <div id="sidebar" class="sidebar">
      <div class="sidebar-menu nav-collapse">

        <!-- SIDEBAR MENU -->
        <ul>

        </ul>
        <!-- /SIDEBAR MENU -->
      </div>

    </div>
    <!-- /SIDEBAR -->
    <div id="main-content">
      <!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
      <div class="modal fade" id="product_config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title">维护商品</h4>
            </div>
            <div class="modal-body">
              <div class="form-group" style="margin-bottom: 5px">
                <label class="control-label col-md-3" style="line-height:34px;">款式：</label>
                <div class="col-md-4">
                  <select id="group1_select" class="col-md-12 select2-offscreen" tabindex="-1">

                  </select>
                </div>
              </div>
              <div class="form-group" style="margin-bottom: 5px">
                <label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>商品名称：</label>
                <div class="col-md-8" style="line-height:34px;">
                  <input type="text" class="form-control width-50" maxlength="20" name="productName" placeholder="请输入商品名称" />
                </div>
              </div>
              <div class="form-group" style="margin-bottom: 5px">
                <label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>颜色：</label>
                <div class="col-md-8" style="line-height:34px;">
                  <input type="text" class="form-control width-50" maxlength="20" name="color" placeholder="请输入颜色/规格" />
                </div>
              </div>
                   <div class="form-group" style="margin-bottom: 5px">
                <label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>销售价：</label>
                <div class="col-md-8" style="line-height:34px;">
                  <input type="text" class="form-control width-50" maxlength="20" name="salePrice" placeholder="请输入销售价" />
                </div>
              </div>

              <div class="form-group" style="margin-bottom: 5px;">
                <label class="control-label col-md-3" style="line-height:34px;"><span class="required">*</span>尺码：</label>
                <div class="col-md-8 sizelist">
                  <p><input type="text" class="form-control width-50" maxlength="20" name="sizeName" placeholder="请输入尺码" />
                    <button type="button" class="btn btn-primary bt-add">增加尺码</button></p>

                </div>
              </div>
              <input type="hidden" name='productCode' />

            </div>

            <div class="modal-footer" style="text-align: center;">

              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-success bt-save">保存</button>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div id="content" class="col-lg-12">
            <!-- PAGE HEADER-->
            <div class="row">
              <div class="col-sm-12">
                <div class="page-header">
                  <!-- STYLER -->

                  <!-- /STYLER -->
                  <!-- BREADCRUMBS -->
                  <ul class="breadcrumb">
                    <li>
                      <i class="fa fa-home"></i>
                      <a href="../index.html">首页</a>
                    </li>
                    <li>
                      <a href="#">商品管理</a>
                    </li>
                    <li>商品列表</li>
                  </ul>
                  <!-- /BREADCRUMBS -->

                </div>
              </div>
            </div>
            <!-- /PAGE HEADER -->
            <!-- FORMS QUERY-->
            <div class="row">
              <div class="col-md-12">
                <div class="row">
                  <div class="col-md-12">
                    <div class="box border primary">
                      <div class="box-title">
                        <h4><i class="fa fa-bars"></i>查询条件</h4>
                      </div>
                      <div class="box-body big" style="padding:10px;">
                        <form class="form-horizontal" role="form" id="exportForm" action="../../admin/adminsku/exportSku.do">
                          <div class="form-group mrg-bt10">
                            <label class="col-sm-1 control-label">SKU编码：</label>
                            <div class="col-sm-2">
                              <input type="text" class="form-control" name="sku" placeholder="请输入SKU编码">
                            </div>
                            <label class="col-sm-1 control-label">商品编码：</label>
                            <div class="col-sm-2">
                              <input type="text" class="form-control" name="pCode" placeholder="请输入商品编码">
                            </div>
                            <label class="col-sm-1 control-label">商品名称：</label>
                            <div class="col-sm-2">
                              <input type="text" class="form-control" name="q" placeholder="请输入商品名称">
                            </div>
                            <div class="col-sm-1">
                              <a class="btn btn-primary search">查询</a>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /FORMS QUERY -->
            <div class="row" style="height: 30px;">
              <div class="col-md-12">
                <div class="box ">
                  <a href="javascript:;" class="btn btn-success bt-create">
                    <i class="fa  fa-plus-square-o"></i> 新增商品
                  </a>
                  <a href="javascript:;" class="btn btn-primary export">
                    <i class="fa  fa-plus-square-o"></i>导出数据
                  </a>
                  <a href="javascript:;" class="btn btn-warning downloadBtn">
                    <i class="fa  fa-plus-square-o"></i>下载模板
                  </a>
                  <a href="batch_sku.html" class="btn btn-success ">
                    <i class="fa  fa-plus-square-o"></i>导入数据
                  </a>
                </div>

              </div>
            </div>

            <div class="row">
              <!-- TABLES -->
              <div class="col-md-12">
                <!-- BOX -->
                <div class="box border primary">
                  <div class="box-title">
                    <h4><i class="fa fa-table"></i>商品数：<span id="total"></span>条 </h4>
                  </div>
                  <div class="box-body">
                    <table id="db_product_list" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">

                    </table>
                  </div>
                </div>
                <!-- /BOX -->
              </div>
            </div>
            <!-- /TABLES -->


            <div class="footer-tools">
              <span class="go-top">
                <i class="fa fa-chevron-up"></i> Top
              </span>
            </div>
          </div>
          <!-- /CONTENT-->
        </div>
      </div>
    </div>
  </section>
  <!--/PAGE -->
  <!-- JAVASCRIPTS -->
  <!-- Placed at the end of the document so the pages load faster -->
  <!-- JQUERY -->
  <script src="../../js/jquery/jquery-2.0.3.min.js"></script>
  <!-- JQUERY UI-->
  <script src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
  <!-- BOOTSTRAP -->
  <script src="../../bootstrap-dist/js/bootstrap.min.js"></script>
  <!-- BLOCK UI -->
  <script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>

  <!-- AUTOSIZE -->
  <script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
  <!-- spinner -->
  <script src="../../js/spinner/spin.js"></script>
  <!-- DATA TABLES -->
  <script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
  <script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>
  <script type="text/javascript" src="../../js/datatables/fnAddTr.js"></script>

  <!-- INPUT MASK -->
  <script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
  <!--bootbox-->
  <script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
  <!-- SELECT2 -->
  <script type="text/javascript" src="../../js/select2/select2.min.js"></script>
  <!-- UNIFORM -->
  <script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
  <script language="javascript" type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
  <!-- COOKIE -->
  <script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
  <!-- CUSTOM SCRIPT -->
  <script src="../../js/script.js"></script>
  <script src="../../js/common.js"></script>
  <script>
    var Product = function () {
      var $mainDataTable = null;
      var productCode = null;
      var deleteProduct = function () {
        var tr = $(this).closest("tr");
        $.confirm("确认删除此商品?", function () {
          $.ajax({
            type: "post",
            url: App.getContextPath() + "admin/adminsku/updateSkuStatus.do",
            async: true,
            data: {
              productCode: $(tr).find(".productCode").html()
            },
            success: function (result) {
              searchProduct();
            }
          });
        });
      };
      var tsProduct = function () {
        var tr = $(this).closest("tr");
        $.confirm("确定将商品推送到旺店通的货品档案?", function () {
          $.ajax({
            type: "post",
            url: App.getContextPath() + "admin/adminsku/pushAdminSkuToWdtGoods.do",
            async: true,
            data: {
              productCode: $(tr).find(".productCode").html()
            },
            success: function (result) {
              if (result.type == 'success') {
                bootbox.dialog({
                  message: '推送到旺店通的货品档案成功!',
                  title: "操作提示",
                  buttons: {
                    success: {
                      label: "关闭",
                      className: "btn-default",
                      callback: function () {
                        searchProduct()
                      }
                    }
                  }
                });
              } else {
                bootbox.dialog({
                  message: result.content,
                  title: "操作提示",
                  buttons: {
                    success: {
                      label: "关闭",
                      className: "btn-default",
                      callback: function () {}
                    }
                  }
                });
              }
            }
          });
        });
      };
      var searchProduct = function (isTrue) {
        var q = $("input[name=q]").val();
        var skuCode = $('input[name=sku]').val();
        var url = App.getContextPath() + "admin/adminsku/searchSkuV2.do?productName=" + q + "&productCode=" + $(
          "[name=pCode]").val() + '&skuCode=' + skuCode
          if(groupId)
          url+="&groupId="+groupId;
        if ($mainDataTable) {
          $mainDataTable.api().ajax.url(url).load();
          if (isTrue) {
            setTimeout(function () {
              $('.btn-ts').eq(0).click()
            }, 200)
          }
          return;
        }
        var dtSetting = $.dataTableSetting({
          "ajaxSource": url,
          "serverSide": true,
          "bFilter": false, // 去掉搜索框
          "bLengthChange": true, // 每页显示数量							
          "sScrollX": "100%",
          "sScrollXInner": "100%",
          "iDisplayLength": 25,

          "bSort": false,
          "aoColumns": [{
            "mDataProp": "productCode",
            "sTitle": "商品编码",
            "width": "6%",
            "class": "productCode"
          }, {
            "mDataProp": "productName",
            "sTitle": "商品名称",
            "width": "24%",
            "class": "productName"
          }, {
            "mDataProp": "color",
            "sTitle": "颜色",
            "width": "8%",
            "class": "color"
          }, {
            "mDataProp": "groupName",
            "sTitle": "商品款式 ",
            "width": "15%",
             "render": function (data, type, row) {
             	return "<a target=_blank href=group_list.html?type=Houtai&q="+row.groupName+">"+row.groupName+"</a>";
            }
          }, {
            "mDataProp": "sizeName",
            "sTitle": "尺码信息 ",
            "width": "10%"            
          }, {
            "mDataProp": "skuCode",
            "sTitle": "SKU编码 ",
            "width": "6%"
          }, {
            "sTitle": "操作",
            "width": "28%",
            "render": function (data, type, row) {
              var str = "<p class='btn-toolbar' style='margin:0px'>" +
                "<a class='btn btn-success btn-xs bt-edit btn-width' style='width:60px' href='javascript:;' productcode="+row.productCode+"><i class='fa fa-pencil-square-o'></i>编辑</a>" +
                "<a class='btn btn-danger btn-xs bt-del btn-width' style='width:60px;margin-left:10px'><i class='fa fa-trash-o'></i> 删除</a>";
              if (!row.pushWdt) {
                str +=
                  "<a class='btn btn-info btn-xs btn-ts' style='line-height:30px;margin-left:10px'><i class='fa fa-refresh'></i> 推送到货品档案</a>";
              }
              str += "</p>";

              return str;
            }
          }]
        });

        $mainDataTable = $("#db_product_list").dataTable(dtSetting);
      };

      var showDialog = function () {

        $("#product_config").find("input").each(function () {
          $(this).val('')
        });
        $(".sizelist").find("p:eq(0)").siblings().remove();

        var option = "<option value=''>选择款式</option>";
        $.each(typeList, function (index, item) {
          option += "<option value='" + item.id + "' groupCode='" + item.groupCode + "'>" +
            item.groupName + "</option>";
        });
        $("#group1_select").empty().append(option).select2({
          placeholder: "选择款式"
        });
        $("#product_config").modal("show");
        $(".bt-add").unbind("click").click(function () {
          var str =
            '<p><input type="text" class="form-control width-50" maxlength="20"  name="sizeName" placeholder="请输入尺码" />	<button type="button" class="btn btn-danger bt-remove" >删除</button></p>';
          $(".sizelist").append(str);
          $(".bt-remove").unbind("click").click(function () {
            $(this).parent().remove();
          });
        });
        $(".bt-save").unbind("click").click(saveSku);

      }
      var saveSku = function () {
        var skulist = [];

         $.each($("#product_config").find("[name=sizeName]"), function (index, item) {
          var sku = {};
          var size = $(item).val();
         
          if (size) {
            sku.groupId = $("#group1_select").val();
            sku.productCode = $("[name=productCode]").val();
            sku.productName = $("[name=productName]").val();
            sku.salePrice = $("[name=salePrice]").val();
            sku.sizeName = size;
            sku.color = $("[name=color]").val();
            sku.isCoats = 0;           
            skulist.push(sku);
          }

        });
        //判断必输项
        if ($("#group1_select").val() == "") {
          $.alert("请选择款式");
          return false;
        }
        if ($("[name=productName]").val() == "") {
          $.alert("请输入商品名称");
          return false;
        }
        if ($("[name=color]").val() == "") {
          $.alert("请输入颜色");
          return false;
        } if ($("[name=salePrice]").val() == "") {
          $.alert("请输入销售价");
          return false;
        }
        //判断Sku
        if (skulist.length == 0) {
          $.alert("请输入设置尺码信息");
          return false;
        }

        $.ajax({
          type: "post",
          url: App.getContextPath() + "admin/adminsku/saveSku.do",
          async: true,
          data: {
            sku: JSON.stringify(skulist),
            groupCode: $("#group1_select option:checked").attr("groupCode"),
            groupId: $("#group1_select option:checked").val()
          },
          success: function (result) {
            $("#product_config").modal("hide");
            searchProduct(true);
          }
        });


      }
      var getSkuList = function () {
        var tr = $(this).closest("tr");
        showDialog();
        productCode = $(this).attr("productcode")
       
        $("[name=productCode]").val(productCode);
        $.ajax({
          type: "post",
          url: App.getContextPath() + "admin/adminsku/getSkuList.do?productCode=" +
            productCode,
          async: true,
          success: function (result) {
            if (result.length > 0) {
              $.each(result, function (index, item) {
                $("#product_config").find("#group1_select").select2("val",item.group.id);
                $("#product_config").find("#group1_select").attr("disabled",
                  "disabled").select2();
                $("[name=productName]").val(tr.find('.productName').text());
                $("[name=color]").val(tr.find('.color').text());
                $("[name=salePrice]").val(item.salePrice);

                if (index == 0) {
                  $(".sizelist").find("input:eq(0)").val(item.sizeName);
                } else {

                  var str =
                    '<p><input type="text" class="form-control width-50" maxlength="20"  value="' +
                    item.sizeName +
                    '" name="sizeName" placeholder="请输入尺码" />	<button type="button" class="btn btn-danger bt-remove" >删除</button></p>';
                  $(".sizelist").append(str);
                }

              });
              $(".bt-remove").unbind("click").click(function () {
                $(this).parent().remove();
              });

            }

          }
        });
      }
      var typeList = [],groupId=null,productCode=null;
      return {

        init: function () {
          groupId=$.getUrlParam("groupId")
          productCode=$.getUrlParam("productcode");
          if(productCode)$("[name=pCode]").val(productCode);
          $(".bt-create").click(showDialog);
          $(".export").click(function () {
            $("#exportForm").submit()
          })
          //下载
          $(".downloadBtn").click(function () {
            location.href = App.getContextPath() +
              "admin/file/downloadTemplate.do?template=Group";
          });   
			$.ajax({
            type: "post",
            url: App.getContextPath() + "admin/group/searchGroupList.do?groupType=Houtai",
            async: true,
            success: function (result) {
              if (result != null) {
                typeList = result
                var option = "<option value=''>选择款式</option>";
                $.each(result, function (index, item) {
                  option += "<option value='" + item.id + "' groupCode='" +
                    item.groupCode + "'>" + item.groupName +
                    "</option>";
                });
                $("#group_select").empty().append(option).select2({
                  placeholder: "选择款式"
                });
                $("#group1_select").empty().append(option).select2({
                  placeholder: "选择款式"
                });
              }

            }
          });

          $(".search").click(function() {
            searchProduct();
          });
          $("#db_product_list").on("click", ".bt-del", deleteProduct);
          $("#db_product_list").on("click", ".bt-edit", getSkuList);
          $("#db_product_list").on("click", ".btn-ts", tsProduct);
          searchProduct();
        }
      }
    }();

    $(function () {
      $("#header").load("../head.html");
      App.init(); //Initialise plugins and elements	        
      Product.init();
      $.fn.modal.Constructor.prototype.enforceFocus = function () {}

    });
  </script>
  <!-- /JAVASCRIPTS -->
</body>

</html>